<template>
<el-row>
      <el-col :offset="2" :span="2">
        <router-link class="me-title" to="/">
          <img src="/static/img/logo.png" />
        </router-link>
      </el-col>

      <el-col :offset="0" :span="12">
        <el-menu
          :default-active="activeIndex"
          :router="true"
          active-text-color="#5FB878"
          menu-trigger="click"
          mode="horizontal"
        >
          <el-menu-item index="/blog/home">首页</el-menu-item>
          <el-menu-item index="/category/categorys">文章分类</el-menu-item>
          <el-menu-item index="/tag/tags">标签</el-menu-item>
          <el-menu-item index="/archive/archives">文章归档</el-menu-item>
          <el-menu-item index="/feedback/feedbacks">留言板</el-menu-item>

          <el-col :offset="1" :span="4">
            <el-menu-item class="menu-item-write" index="/write">
              <i class="el-icon-edit"></i>写文章
            </el-menu-item>
          </el-col>
        </el-menu>
      </el-col>

      <el-col :offset="0" :span="4" class="my-user-menu">
        <el-menu :router="true" active-text-color="#5FB878" menu-trigger="click" mode="horizontal">
          <template v-if="!user.login">
            <el-menu-item index="/login">
              <el-button type="text">登录</el-button>
            </el-menu-item>
            <el-menu-item index="/register">
              <el-button type="text">注册</el-button>
            </el-menu-item>
          </template>

          <template v-else>
            <el-submenu index>
              <template slot="title">
                <img :src="user.avatar||defaultAvatar" class="me-header-picture" />
              </template>
              <el-menu-item @click="logout" index>
                <i class="el-icon-back"></i>退出
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
    </el-row>
</template>

<script>
import defaultAvatar from '@/assets/img/default_avatar.png'
export default {
  data () {
    return {
      defaultAvatar: defaultAvatar
    }
  },
  computed: {
    user () {
      let login = this.$store.state.account.length !== 0
      let avatar = this.$store.state.avatar
      return {
        login,
        avatar
      }
    },
    activeIndex () {
      let path = this.$route.path
      return path || '/blog/home'
    }
  },
  methods: {
    logout () {
      let that = this
      this.$store
        .dispatch('logout')
        .then(() => {
          this.$router.push({ path: '/' })
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({ message: error, type: 'error', showClose: true })
          }
        })
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-header {
  padding: 0;
}
.el-menu-item el-button {
  margin-left: 20px;
}
.my-menu-button {
  display: inline-block;
  margin-left: 20px;
}
.el-col {
  max-height: 60px;
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.me-title img {
  max-height: 60px;
  max-width: 100%;
}
.me-header-picture {
  width: 30px;
  height: 30px;
  background-color: #000;
}
</style>
